<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AT命令 - DTU管理系统</title>
    <script src="js/toast.js"></script>
    <link rel="stylesheet" href="css/common.css">
</head>
<body>
    <div class="header">
        <h1>AT命令执行</h1>
        <div class="breadcrumb">DTU管理系统 / AT命令</div>
    </div>

    <div class="container">
        <!-- Tab导航 -->
        <div class="nav-tabs">
            <a href="index.html" class="nav-tab">首页</a>
            <a href="network.html" class="nav-tab">网络配置</a>
            <a href="serial.html" class="nav-tab">串口配置</a>
            <a href="collect.html" class="nav-tab">数据采集</a>
            <a href="push.html" class="nav-tab">数据推送</a>
            <a href="at-command.html" class="nav-tab active">AT命令</a>
            <a href="system.html" class="nav-tab">系统设置</a>
        </div>
        

        <!-- AT命令控制台 -->
        <div class="config-section">
            <h3>AT命令控制台</h3>
            <div class="form-group">
                <label for="at-command-input">输入AT命令</label>
                <div class="input-group">
                    <input type="text" id="at-command-input" placeholder="例如: AT+DEVICE_ADD=485,1,3,0,10">
                    <button type="button" class="btn btn-primary" onclick="executeATCommand()">执行</button>
                    <button type="button" class="btn btn-secondary" onclick="clearATOutput()">清空</button>
                </div>
            </div>

            <div class="form-group">
                <label for="at-command-output">命令输出</label>
                <textarea id="at-command-output" class="command-output" readonly placeholder="命令输出将显示在这里..."></textarea>
            </div>

<!--            &lt;!&ndash; 常用命令快捷按钮 &ndash;&gt;-->
<!--            <div style="margin-top: 1rem;">-->
<!--                <h4 style="color: #667eea; margin-bottom: 0.5rem;">常用命令快捷操作</h4>-->
<!--                <button type="button" class="btn btn-secondary" onclick="executeQuickCommand('AT+VERSION')">查看版本</button>-->
<!--                <button type="button" class="btn btn-secondary" onclick="executeQuickCommand('AT+DEVICE_LIST')">设备列表</button>-->
<!--                <button type="button" class="btn btn-secondary" onclick="executeQuickCommand('AT+COLLECT_STATUS')">采集状态</button>-->
<!--                <button type="button" class="btn btn-secondary" onclick="executeQuickCommand('AT+CONFIG_SAVE')">保存配置</button>-->
<!--            </div>-->
        </div>
    </div>

    <!-- Toast容器 -->
    <div class="toast-container" id="toast-container"></div>

    <script>

        // AT命令相关函数
        async function executeATCommand() {
            const input = document.getElementById('at-command-input');
            const output = document.getElementById('at-command-output');
            const command = input.value.trim();

            if (!command) {
                showMessage('请输入AT命令', 'danger');
                return;
            }

            // 在输出区域显示输入的命令
            const timestamp = new Date().toLocaleTimeString();
            output.value += `[${timestamp}] > ${command}\n`;
            output.scrollTop = output.scrollHeight;

            try {
                const response = await fetch('/api/at-command', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ command: command })
                });

                const result = await response.json();

                if (result.success) {
                    output.value += `${result.response}\n\n`;
                    showMessage('AT命令执行成功', 'success');
                } else {
                    output.value += `ERROR: ${result.error}\n\n`;
                    showMessage('AT命令执行失败', 'danger');
                }
            } catch (error) {
                output.value += `ERROR: 网络请求失败 - ${error.message}\n\n`;
                showMessage('网络请求失败', 'danger');
            }

            output.scrollTop = output.scrollHeight;
            input.value = '';
        }

        // 执行快捷命令
        async function executeQuickCommand(command) {
            const input = document.getElementById('at-command-input');
            input.value = command;
            await executeATCommand();
        }

        function clearATOutput() {
            document.getElementById('at-command-output').value = '';
        }

        // 支持回车键执行AT命令
        document.addEventListener('DOMContentLoaded', function() {
            console.log('AT命令页面已加载');
            
            const input = document.getElementById('at-command-input');
            if (input) {
                input.addEventListener('keypress', function(e) {
                    if (e.key === 'Enter') {
                        executeATCommand();
                    }
                });
                
                // 自动聚焦到输入框
                input.focus();
            }
        });
    </script>
</body>
</html>